<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-空间转换</title>
    <style>
        body{
            /* 透视，加在父类元素身上，取值范围是800-1000 */
            perspective: 1000px;
        }
        .box{
            width:200px;
            height:200px;
            background:red;
            margin: 30px auto;
            transition: all .4s;
        }
        .box:hover{
            /* 数值：正负值，百分比 */
            transform: translateX(360px);
            transform: translateY(90px);
            /* 看不出任何效果，原因是电脑屏幕是一个平面,没有透视，所以看不到 */
            /* transform: translateZ(200px); */
            transform: translateZ(-200px);
        }
    </style>
</head>
<body>
    <!-- 空间旋转 x,y,z轴 -->
    <div class="box"></div>
</body>
</html>